@align: flex-start, flex-end, center, baseline, stretch;
@justify: flex-start, flex-end, center, space-between, space-around;

.el-grid-row {
  margin-right: -1.1538rem;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.el-grid-flex {
  display: flex;
  flex-flow: row wrap;
  &:before,
  &:after {
    display: flex;
  }
}

.make-grid-align(@l, @i) when (@i <= @l) {
  @name: extract(@align, @i);
  .el-grid-align-@{name} {
    align-items: @name;
  }
  .make-grid-align(@l, @i+1)
}

.make-grid-align(length(@align), 1);

.make-grid-justify(@l, @i) when (@i <= @l) {
  @name: extract(@justify, @i);
  .el-grid-justify-@{name} {
    justify-content: @name;
  }
  .make-grid-justify(@l, @i+1)
}

.make-grid-justify(length(@justify), 1);

.el-col-1,
.el-col-10,
.el-col-11,
.el-col-12,
.el-col-13,
.el-col-14,
.el-col-15,
.el-col-16,
.el-col-17,
.el-col-18,
.el-col-19,
.el-col-20,
.el-col-21,
.el-col-22,
.el-col-23,
.el-col-24,
.el-col-2,
.el-col-3,
.el-col-4,
.el-col-5,
.el-col-6,
.el-col-7,
.el-col-8,
.el-col-9 {
  float: left;
  min-height: 1px;
  padding-right: 1.1538rem;
  position: relative;
  flex: 0 0 auto;
  &.el-col-inline {
    float: none;
    display: inline-block;
  }
}

.el-col-24 {
  float: none
}

.make-col(@i) when (@i>=1) {
  .el-col-@{i} {
    width: (@i*(100%/24));
  }
  .make-col((@i - 1))
}

.make-col(23);

.make-offset(@j) when (@j>=1) {
  .el-col-offset-@{j} {
    margin-left: (@j*(100%/24));
  }
  .make-offset((@j - 1))
}

.make-offset(24);

.el-col-offset-0 {
  margin-left: 0
}

.make-col-order(@i) when (@i>=0) {
  .el-col-order-@{i} {
    order: @i;
  }
  .make-col-order((@i - 1))
}

.make-col-order(24);

